<template>
    <div id="footer">
        <div class="try">
            <p class="text_one">毕业设计过程管理系统</p>
            <div>© All Right Reserved . GDPMS 版权所有备案号：蜀ICP备20220141**号</div>
            <div>
                <button @click="conectUs()">联系我们</button>
                <button @click="guideBook()">用户指南</button>
            </div>
        </div>
        <div class="authority">
            <div class="authority_all">
                <div>狮子山校区：成都市锦江区静安路5号 (邮编:610066)</div>
                <div>成龙校区：成都市龙泉驿区成龙大道二段1819号 (邮编:610101)</div>
            </div>
        </div>
    </div>
</template>
<script>
import servicesApi from '@/services/servicesApi';

export default {
    name: 'Footer',
    data() {
        return {};
    },
    methods: {
        conectUs() {
            window.open('https://weibo.com/u/6082464390/home?wvr=5', '_blank')
        },
        //下载文件
        download() {
            let Form = {
                filename: '毕业论文管理系统简易使用手册',
                path: 'student/wenxian',
                suffix: 'docx'
            }
            let FileName = '毕业论文管理系统简易使用手册.docx'
            let form = { url: '/teacher/down/file', id: -1, data: Form }
            servicesApi.downloadFiles(form).then(res => {
                // console.log(res)
                try {
                    const blob = new Blob([res.data], {
                        type: 'application/octet-stream'
                    })
                    const downloadElement = document.createElement('a')
                    // 创建下载的链接
                    // 兼容不同浏览器的URL对象
                    const url = window.URL || window.webkitURL || window.moxURL;
                    const href = url.createObjectURL(blob)
                    downloadElement.href = href
                    // 下载后文件名
                    downloadElement.download = FileName
                    document.body.appendChild(downloadElement)
                    // 点击下载
                    downloadElement.click()
                    // 下载完成移除元素
                    document.body.removeChild(downloadElement)
                    // 释放掉blob对象
                    url.revokeObjectURL(href)
                    //编译文件完成后，进度条展示为100%100
                    this.percentage = 100;
                    //下载完成 可以重新点击按钮下载
                    this.isDisabled = false;
                } catch (error) {
                    // console.log('下载的文件出错', error)
                }

            })
        },
        guideBook() {
            this.$confirm('确认下载用户操作指南?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.download()
            })
        }
    },
};
</script>
<style scoped>
#footer {
    /* height:80% */
    /* min-height: 22%; */
    width: 100%;
    position:absolute;
    background-color: #e8ecee;
    z-index: 1021;
}

.logo {
    width: 100px;
    height: 100%;
    float: left;
    margin-left: -80px;
    position: relative;
}

.logo img {
    width: 65px;
    height: 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.try {
    display: flex;
    height: 40%;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    /* background-color: #409eff; */
    /* background-color: #ffffff; */
}
.try>div>button {
    display: inline-flex;
    margin: 15px;
    border-radius: 19px;
    padding: 0 33px;
    font-size: 16px;
    font-weight: 700;
    color: black;
    line-height: 36px;
    background: #fff;
    border: 1px solid #fff;
    transition: all ease 0.8s;
}

.try>div>button:hover {
    background-color: rgb(59, 59, 82);
    color: white;

}

.text_one {
    /* font-size: 28px; */
    color: black;
    /* line-height: 45px; */
    letter-spacing: 4px;
}

.authority {
    height: 60%;
    width: 100%;
    /* background-color: #409eff; */
    /* background-color: #ffffff; */
    color: #5c5758;
}

.authority_other {
    display: flex;
    justify-content: space-around;
    height: 65%;
}

.authority_other>div>div {
    padding: 4px 0;
}

.authority_all {
    display: flex;
    /* padding-top: 10px; */
    padding-bottom: 20px;
    flex-direction: row;
    /* background-color: rgb(168, 74, 74); */
    /* height: calc(35% - 48px); */
    text-align: center;
    /* justify-content: space-between; */
    justify-content: center;
}

.authority_all>div {
    margin-left: 50px;
    /* width: 100%; */
    padding: 6px 0;
}
</style>